<%--

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page language="java" import="java.util.*,java.text.SimpleDateFormat,java.util.Calendar,java.util.GregorianCalendar,java.util.Date" pageEncoding="Utf-8"  %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        /* 公共样式表 */


        /* 左浮动 */
        .fl{
            float: left;
        }
        /* 右浮动 */
        .fr{
            float: right;
        }
        /* 清除浮动 */
        .clearfix::after{
            content: '';
            height: 0px;
            display: block;
            clear: both;
        }

        /* 测试 */
        .test{
            border: 1px solid red;
        }

        /* 重置container内边距 */
        .container , .container-fuild{
            padding: 0%;
        }

        body{
            background-color: #f2f2f2;
        }
        h1,h2,h3,h4,h5,h6{
            padding: 0%;
            margin: 0%;
        }

        /* ================================================================================== */


        /* 公共模块表 */

        /* 头部模块 */

        /* 尾部模块 */

        /* 重置样式表 */

        /* 重置内外边距 */
        *{
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }

        /* 去除图片底部4px白边 */
        img{
            vertical-align: middle;
        }

        /* 去除li的点 */
        ul{
            list-style: none;
        }

        /* 重置a标签的默认样式 */
        a{
            text-decoration: none;
            color: black;
        }
        /*body{
            font-family: sans-serif;!*字体加粗*!
            background-image: url("../src/img/login.png");!*背景图片*!
            background-repeat: no-repeat;!*图片不重复*!
            overflow: hidden;!*溢出隐藏*!
            background-size: cover;!*背景覆盖窗口*!
        }*/
        /* ================================================================================== */
        /* 登录样式 */
        form {
            width: 600px;
            height: 400px;
            text-align: center;
            position: relative;
            margin: 0 auto;
            background-color: rgba(0, 0, 0, .5);
            margin-top: 10%;
            border-radius: 20px;
            padding-top: 40px;
        }

        .login {
            width: 200px;
            height: 50px;
            margin: 0% auto;
            line-height: 50px;
        }
        .login a{
            font-size: 36px;
            color: whitesmoke;
        }
        .passWord,
        .userName,
        .button{
            width: 420px;
            margin: 0 auto;
            margin-top: 30px;
            box-sizing: border-box;
        }

        .passWord p,
        .userName p {
            color: whitesmoke;
            font-size: 28px;
            line-height: 50px;
        }

        #userName,
        #passWord{
            height: 50px;
            width: 320px;
            font-size: 24px;
            outline: none;
            padding-left: 20px;
            background: none;
            border-radius: 15px;
            border: 2px solid gray;
        }

        button {
            width: 320px;
            height: 50px;
            background: none;
            outline: none;
            border: 2px solid gray;
            border-radius: 15px;
            font-size: 24px;
            transition: all 1s;
            color: whitesmoke;
        }

        button:hover {
            background: rgb(175, 170, 175);
            color: whitesmoke;
        }

        .register {
            width: 300px;
            margin-top: 20px;

        }

        .register a {
            color: whitesmoke;
            font-size: 18px;
        }
        input{
            color: whitesmoke;
        }

    </style>
</head>
<body>
    <div class="login "><a>登录页面</a>
    </div>
    <div class="userName  clearfix">
        <p class="fl">用户名:</p>
        <input type="text" name="name" class="fr" id="userName" placeholder="请输入用户名">
    </div>

    <div  class="passWord  clearfix">
        <p class="fl">密码:</p>
        <input type="text" name="password" class="fr" id="passWord" placeholder="请输入密码">
    </div>

    <div class="button clearfix">
        <button type="submit" class="fr" id="button" onclick="send()">登录</button></div>

    <div class="register fr"><a href="register">注册新账号</a> </div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>


<script type="text/javascript">
    var flag;
    function send(){
        var name = $("input[name=name]").val();
        var psw = $("input[name=password]").val()
        var myData = {
            "uid": 1,
            "nickname":name,
            "vip":true,
            "password":psw,
            "landPurchased" :"123",
            "itemPurchased" :"123",
        };
        $.ajax({
            contentType : "application/json;charset=UTF-8",//必须
            url: "http://localhost:8080/userdata/login",
            type: "post",
            data: JSON.stringify(myData),
            success:function(response){
                var jsonobj= eval(response);
                var flag = JSON.stringify(jsonobj)//将json对象转化成字符串
                if(flag == "1"){
                    a();
                }
                else{
                    alert("账号或密码错误");
                }
            },
            error:function(){
                alert("Error");
            }

        });
    }
    function a() {
        window.location.href='pay'
    }
</script>
</body>

</html>



--%>


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>login</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap {
            height: 719px;
            width: 100;
            background-image: url(https://pic1.zhimg.com/v2-0087e364e1f120dfd9896d7331809793_r.jpg?source=1940ef5c);
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
        }
        #head {
            height: 120px;
            width: 100;
            background-color: #66CCCC;
            text-align: center;
            position: relative;
        }
        #foot {
            width: 100;
            height: 126px;
            background-color: #CC9933;
            position: relative;
        }
        #wrap .logGet {
            height: 408px;
            width: 368px;
            position: absolute;
            background-color: #FFFFFF;
            top: 20%;
            right: 15%;
        }
        .logC a button {
            width: 100%;
            height: 45px;
            background-color: #ee7700;
            border: none;
            color: white;
            font-size: 18px;
        }
        .logGet .logD.logDtip .p1 {
            display: inline-block;
            font-size: 28px;
            margin-top: 30px;
            width: 86%;
        }
        #wrap .logGet .logD.logDtip {
            width: 86%;
            border-bottom: 1px solid #ee7700;
            margin-bottom: 60px;
            margin-top: 0px;
            margin-right: auto;
            margin-left: auto;
        }
        .logGet .lgD img {
            position: absolute;
            top: 12px;
            left: 8px;
        }
        .logGet .lgD input {
            width: 100%;
            height: 42px;
            text-indent: 2.5rem;
        }
        #wrap .logGet .lgD {
            width: 86%;
            position: relative;
            margin-bottom: 30px;
            margin-top: 30px;
            margin-right: auto;
            margin-left: auto;
        }
        #wrap .logGet .logC {
            width: 86%;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }


        .title {
            font-family: "宋体";
            color: #FFFFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
            font-size: 36px;
            height: 40px;
            width: 30%;
        }

        .copyright {
            font-family: "宋体";
            color: #FFFFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
            height: 60px;
            width: 40%;
            text-align:center;
        }


        #foot .copyright .img {
            width: 100%;
            height: 24px;
            position: relative;
        }
        .copyright .img .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 22px;
            vertical-align: middle;
            background-image: url(${pageContext.request.contextPath}/img/email_address.png);
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }

        .copyright .img .icon1 {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 22px;
            vertical-align: middle;
            background-image: url(${pageContext.request.contextPath}/img/address.png);
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }
        .copyright .img .icon2 {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 22px;
            vertical-align: middle;
            background-image: url(${pageContext.request.contextPath}/img/phone.png);
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }
        #foot .copyright p {
            height: 24px;
            width: 100%;
        }
    </style>
</head>

<body img="">
<div class="header" id="head">
    <div class="title">共享农庄平台</div>

</div>

<div class="wrap" id="wrap">
    <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
            <p class="p1">登录</p>
        </div>
        <!-- 输入框 -->
        <div class="lgD">
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.jUn4UqSUP6owE15Zi0GjlQAAAA?w=183&h=183&c=7&r=0&o=5&dpr=1.3&pid=1.7" width="20" height="20" alt=""/>
            <input type="text"  id="userName"
                   placeholder="输入用户名" />
        </div>
        <div class="lgD">
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.mCpjAwxn6EoCRVyEybTUuAHaHa?w=182&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" width="20" height="20" alt=""/>
            <input type="text" id="passWord"
                   placeholder="输入用户密码" />
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;<span id="request" style="color: crimson"></span>
        <div class="logC">
            <a href="#" target="_self"><button onclick="send()">登 录</button></a>
            <a href="register">跳转去注册</a>
        </div>
    </div>
</div>

<div class="footer" id="foot">
    <div class="copyright">
        <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>
        <div class="img">
            <i class="icon"></i><span>联系邮箱：12334@yahoo.com</span>
        </div>

        <div class="img">
            <i class="icon1"></i><span>联系地址：南昌航空大学</span>
        </div>

        <div class="img">
            <i class="icon2"></i><span>联系电话：123456</span>
        </div>


    </div>

</div>
<script type="text/javascript">
    var flag;
    function send(){
        var name = $("#userName").val();
        var psw = $("#passWord").val()
        var myData = {
            "uid": 1,
            "nickname":name,
            "vip":true,
            "password":psw,
            "landPurchased" :"123",
            "itemPurchased" :"123",
        };
        $.ajax({
            contentType : "application/json;charset=UTF-8",//必须
            url: "http://localhost:8080/userdata/login",
            type: "post",
            data: JSON.stringify(myData),
            success:function(response){
                var jsonobj= eval(response);
                var flag = JSON.stringify(jsonobj)//将json对象转化成字符串
                if(flag == "1"){
                    a();
                }
                else{
                    $("#request").html("账号或者密码错误");
                }
            },
            error:function(){
                alert("Error");
            }

        });
    }
    function a() {
        window.location.href='home'
    }
</script>

</body>
</html>